<template>
  <el-drawer
    :before-close="handleClose"
    :close-on-click-modal="false"
    :model-value="datas.visble"
    :title="`${datas.forms.title}部门`"
    size="600px">
    <el-form
      ref="ruleFormRef"
      :disabled="drawerProps.isView"
      :hide-required-asterisk="drawerProps.isView"
      :label-position="'top'"
      :model="drawerProps.row"
      :rules="rules"
      label-suffix=" :"
      label-width="100px"
    >
      <div class="title">
        <div style="margin-right: 13px">
          <el-icon style="color:#3370FF;font-size: 14px">
            <Warning/>
          </el-icon>
        </div>
        <div style="color: #3370FF;line-height: 22px;">
          <div>
            说明：
          </div>
          <div>
            1. 业务部门下的业务人员会关联资源领取限制
          </div>
          <div>
            2. 处理相关业务数据，选取部门时仅展示相关业务部门
          </div>
        </div>

      </div>

      <div style="display:flex;">
        <el-form-item label="部门名称" prop="username" style="margin-right: 20px">
          <el-input v-model="drawerProps.row!.username" clearable placeholder="请填写用户姓名" style="width:270px;"></el-input>
        </el-form-item>

        <el-form-item label="上级部门" prop="gender">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>

      <div style="display:flex;">
        <el-form-item label="部门类型" prop="gender" style="margin-right: 20px">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" name="addDepartment" setup>
import {defineEmits, reactive, ref} from "vue";
import {genderType} from "@/utils/dict";
import {ElMessage, FormInstance} from "element-plus";
import {User} from "@/api/interface";
import {Warning} from "@element-plus/icons-vue";

const emit = defineEmits(['back'])

const rules = reactive({
  avatar: [{required: true, message: "请上传用户头像"}],
  photo: [{required: true, message: "请上传用户照片"}],
  username: [{required: true, message: "请填写用户姓名"}],
  gender: [{required: true, message: "请选择性别"}],
  idCard: [{required: true, message: "请填写身份证号"}],
  email: [{required: true, message: "请填写邮箱"}],
  address: [{required: true, message: "请填写居住地址"}]
});
const kaishi = () => {
  console.log('开始了')
}
kaishi()

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<User.ResUserList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

// 使用defineProps来声明props
const props = defineProps({
  datas: Object
})
// const visible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {
    status: 1
  }
});
const handleClose = (done: () => void) => {
  emit('back')
}
// 接收父组件传过来的参数
// const acceptParams = (params: DrawerProps) => {
//   drawerProps.value = params;
//   drawerVisible.value = true;
// };


// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({message: `${drawerProps.value.title}用户成功！`});
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

const changeStatus = (row) => {

  console.log(row, '开关启用')
}

// defineExpose({
//   acceptParams
// });
</script>
<style lang="scss" scoped>
.title {
  padding: 20px;
  width: 520px;
  height: 50px;
  background: #ECF5FF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #C6E2FF;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
}
</style>
